<template>
  <div>
    <Input v-model="contextName" placeholder="报文规则名称" style="width: 200px"/>
    <Button type="success" @click="parseContext">解析</Button>
    <Button type="warning" @click="saveContextRule">保存</Button>
    <Table height="400" :columns="ruleColumns" :data="ruleData"></Table>
    <Button type="success" @click="parseContext">解析</Button>
    <Button type="info" @click="addNewRule">新增</Button>
    <Button type="error" @click="clearRule">清空</Button>

    <Input v-model="context" type="textarea" :rows=4 placeholder="输入报文"/>
    <Table height="400" :columns="parsedResult" :data="parsedResultData"></Table>
    <Modal
        v-model="clearModal"
        title="提示"
        @on-ok="clearOk"
        @on-cancel="clearCancel">
      <p>是否要清空所有的字段？</p>
    </Modal>


    <Modal
        v-model="editModal"
        title="修改报文规则"
        @on-ok="editOk"
        @on-cancel="editCancel">
      <p>字段名<Input v-model="editName"></Input></p>
      <p>中文名<Input v-model="editNameCn"></Input></p>
      <p>长度<Input v-model="editLen"></Input></p>
    </Modal>
  </div>
</template>

<script>
import bus from 'emitvue';
import _ from "lodash";

export default {
  name: "ContextLoad",
  data() {
    return {
      // 报文名称
      contextName: '',
      //用来修改保存的报文名称
      rawContextName: '',
      // 配置列表
      ruleColumns: [
        {
          title: "字段名",
          key: 'name',

        },
        {
          title: "中文名",
          key: "nameCn",
        },
        {
          title: "长度",
          key: 'len',
        },
        {
          title: 'Action',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editRow(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.insertRow(params.index)
                  }
                }
              }, '插入'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removeRow(params.index)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      ruleData: [],
      // 结果
      parsedResult: [
        {
          title: "字段名",
          key: 'name',

        },
        {
          title: "中文名",
          key: "nameCn",
        },
        {
          title: "值",
          key: 'data',
          render:(h,params)=>{
            let index = params.row._index;

            let len = this.ruleData[index].len;
            console.log('len = ',len)
            console.log('params.row.data.length = ',params.row.data.length)
            if(params.row.data==='缺失'){
              return h('span',{
                'style':{
                  'color':'#FF0000',
                }
              },params.row.data)
            } else if (params.row.data.length < len) {
              return h('span',{
                'style':{
                  'color':'#FFD700',
                }
              },params.row.data)
            } else {
              return h('span',{},params.row.data);
            }
          }
        },
      ],
      parsedResultData: [],
      context: '',
      clearModal: false,
      editModal: false,
      editName: '',
      editNameCn: '',
      editLen: '',
      currentIndex: null,
      operator: -1, // 0-新增 1-修改 2-插入
    }
  },
  methods: {
    parseContext() {
      this.parsedResultData = [];
      if (this.ruleData.length === 0) {
        this.$Message.error('请先配置报文规则');
        return;
      }
      if (this.context === '') {
        this.$Message.error('请输入要解析的报文');
        return;
      }
      let data = this.context;
      let index = 0;
      for (let i = 0; i < this.ruleData.length; i++) {
        console.log("index = ", index);
        let temp = data;
        let name = this.ruleData[i].name;
        let nameCn = this.ruleData[i].nameCn;
        let len = this.ruleData[i].len;
        let res = temp.substr(index, len)
        if (!res) {
          res = '缺失';
        }
        this.parsedResultData.push({
          name,
          nameCn,
          data: res,
        })
        console.log("data->",this.parsedResultData);
        index += parseInt(len);
      }
    },

    // 保存规则
    saveContextRule() {
      let data = {
        name: this.contextName,
        rawName: this.rawContextName,
        rules: this.ruleData,
      }
      bus.$emit('saveContextRule', data);
    },

    // 新增报文规则的一个字段
    addNewRule() {
      this.editModal = true;
      this.currentIndex = null;
      this.operator = 0;
    },

    // 清空报文规则
    clearRule() {
      this.clearModal = true;
    },

    editRow(index) {
      this.currentIndex = index;
      this.editModal = true;
      this.operator = 1;
      this.editName = this.ruleData[this.currentIndex].name;
      this.editNameCn = this.ruleData[this.currentIndex].nameCn;
      this.editLen = this.ruleData[this.currentIndex].len;
    },

    //插入和删除
    insertRow(index) {
      this.currentIndex = index;
      this.editModal = true;
      this.operator = 2;


    },
    removeRow(index) {
      this.ruleData.splice(index, 1);
      this.$Message.success('删除成功');
    },

    clearOk() {
      this.ruleData = [];
      this.$Message.success('清空成功');
    },
    clearCancel() {
      this.$Message.warning('取消了');
    },

    editOk() {
      // 先做安全校验
      if (this.editName === '' || this.editLen === '') {
        this.$Message.error('字段名字和长度不能为空');
        return;
      }
      if (_.isNaN(this.editLen)) {
        this.$Message.error('长度必须是数字');
        return;
      }
      // 新增
      if (this.operator === 0) {
        this.ruleData.push({
          name: this.editName,
          nameCn: this.editNameCn,
          len: this.editLen,
        })


      } else if (this.operator === 1) {
        // 修改
        this.ruleData[this.currentIndex].name = this.editName;
        this.ruleData[this.currentIndex].nameCn = this.editNameCn;
        this.ruleData[this.currentIndex].len = this.editLen;
        console.log('this.ruleData = ',this.ruleData)

      } else if (this.operator === 2) {
        // 插入
        this.ruleData.splice(this.currentIndex, 0, {
          name: this.editName,
          nameCn: this.editNameCn,
          len: this.editLen,
        })
      }
      // 重置
      this.editName = '';
      this.editNameCn = '';
      this.editLen = '';
      this.$Message.success('操作成功')
    },
    editCancel() {
      this.$Message.warning('取消了编辑');
    }
  },
  created() {
    bus.$on("openContext", (data) => {
      console.log('加载报文规则 data = ', data);
      this.contextName = data.name;
      this.rawContextName = data.name;
      this.ruleData = data.rules;
    })
  },


}
</script>

<style scoped>

</style>
